<template>
  <div id="background">
    <el-container>
      <el-header style="height:200px">
        <div>
          <el-row type="flex" style="margin-top:40px">
            <el-col :xs="3" :sm="3" :md="3" :offset="2">
              <img v-if="step==1" v-bind:src="backIcon" style="height:28px" @click="back" />
              <img v-if="step==2" v-bind:src="backIcon" style="height:28px" @click="goToStep1" />
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" style="margin-bottom:30px">
            <el-col :xs="20" :sm="20" :md="20" class="imgCol">
              <img v-bind:src="titleImg" style="height:40px" />
            </el-col>
          </el-row>
          <el-row type="flex" class="stepBottom" justify="center">
            <el-col :xs="22" class="imgCol">
              <img v-bind:src="step1Img" style="height:25px" />
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main v-if="step==1">
        <div id="inputHeight">
          <el-row type="flex" style="margin-bottom:15px">
            <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
              <img v-bind:src="phoneIcon" style="height:25px" />
            </el-col>
            <el-col :xs="17" :sm="17" :md="17">
              <el-input
                class="registInput"
                id="registInput1"
                v-model="loginForm.phone"
                placeholder="请输入手机号"
                clearable
                style="width:100%"
              ></el-input>
            </el-col>
          </el-row>
          <el-row type="flex" style="margin-bottom:15px">
            <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
              <img v-bind:src="codeIcon" style="height:20px" />
            </el-col>
            <el-col :xs="12" :sm="12" :md="12">
              <el-input
                class="registInput"
                id="registInput2"
                v-model="loginForm.checkCode"
                placeholder="请输入验证码"
                clearable
              ></el-input>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7">
              <button
                v-show="!showTime"
                class="btnYanZhen"
                style="color:#cccccc"
                @click="getYanZhen"
                :disabled="disYanZhen"
                id="checkCodeBtn"
              >获取验证码</button>
              <button
                v-show="showTime"
                class="btnYanZhen"
                style="color:#cccccc"
                @click="getYanZhen"
                disabled
              >{{count}}s</button>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
              <el-checkbox v-model="checked"></el-checkbox>
            </el-col>
            <el-col class="words" style="font-size:13px" :xs="19" :sm="22" :md="22">
              <p>
                我已同意
                <a @click="goToXieYi" style="color:#53cdf5">《新职通服务协议》</a>
              </p>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row type="flex" justify="center">
            <el-col :xs="20" :sm="20" :md="20">
              <button v-show="checked" class="btn" @click="goToStep2">
                <p class="btnWords">下一步</p>
              </button>
              <button v-show="!checked" class="btnNotRegist">
                <p class="btnWords">下一步</p>
              </button>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-main v-else-if="step==2">
        <div id="inputHeight">
          <el-row type="flex" style="margin-bottom:60px">
            <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol">
              <img v-bind:src="codeIcon" style="height:20px" />
            </el-col>
            <el-col :xs="17" :sm="17" :md="17">
              <el-input
                class="registInput"
                id="registInput2"
                v-model="loginForm.password"
                placeholder="请为账号设置密码"
                show-password
                clearable
              ></el-input>
            </el-col>
          </el-row>-
        </div>
        <div>
          <el-row type="flex" justify="center" style="margin-bottom:10px">
            <el-col :xs="20" :sm="20" :md="20">
              <button class="btn" @click="submit">
                <p class="btnWords">确定</p>
              </button>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer id="thirdPositionRegist" style :class="whichPosition?'registFootPosition':''">
        <el-row type="flex" justify="center">
          <img v-bind:src="thirdIcon" style="height:18px;width:100%;margin-bottom:8px" />
        </el-row>
        <el-row type="flex">
          <el-col :xs="4" :sm="4" :md="4" :offset="7">
            <img v-bind:src="qqIcon" style="height:2.5em" />
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :offset="2">
            <img v-bind:src="wechatIcon" style="height:2.5em" />
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import backIcon from "../../assets/img/regist/back.png";
import titleImg from "../../assets/img/regist/title.png";
import step1Img from "../../assets/img/regist/1.png";
import phoneIcon from "../../assets/icon/login/phone.png";
import codeIcon from "../../assets/icon/login/code.png";
import qqIcon from "../../assets/icon/login/qq.png";
import wechatIcon from "../../assets/icon/login/wechat.png";
import thirdIcon from "../../assets/img/login/third.png";
import { Toast } from "vant";
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      var pattern = /^1[34578]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (value.length !== 11 || !pattern.test(value)) {
        callback(new Error("手机格式不正确"));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (value.length <= 6) {
        callback(new Error("密码不能小于6位"));
      } else {
        callback();
      }
    };
    return {
      //记录是步骤几
      step: 1,
      //记录是注册还是忘记密码
      type: "",
      time: 30 * 60 * 60 * 1000,
      count: 60,
      showTime: false,
      backIcon: backIcon,
      titleImg: titleImg,
      step1Img: step1Img,
      phoneIcon: phoneIcon,
      codeIcon: codeIcon,
      qqIcon: qqIcon,
      wechatIcon: wechatIcon,
      thirdIcon: thirdIcon,
      // normalHeight:document.documentElement. clientHeight,
      loginForm: {
        phone: "",
        checkCode: "",
        password: ""
      },
      rules: {
        phone: [
          //   { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        checkCode: [
          { required: true, message: "请输入验证码", trigger: "blur" }
        ],
        password: [{ validator: validatePassword, trigger: "blur" }]
      },
      disYanZhen: true,
      checked: true,
      //实时屏幕高度
      showHeight: document.documentElement.clientHeight,
      height: document.documentElement.clientHeight,
      whichPosition: true
    };
  },
  watch: {
    loginForm: {
      handler: function() {
        // console.log("loginform:");
        // console.log(this.loginForm);
        var yanzhen = document.getElementById("checkCodeBtn");
        var pattern = /^1[34578]\d{9}$/;
        if (
          this.loginForm.phone.length == 11 &&
          pattern.test(this.loginForm.phone)
        ) {
          if (yanzhen) {
            yanzhen.style.color = "#53cdf5";
            this.disYanZhen = false;
            // console.log(this.loginForm.phone);
          }
        } else {
          if (yanzhen) {
            yanzhen.style.color = "#cccccc";
            //Toast("请输入正确的手机号！");
            this.disYanZhen = true;
          }
        }
      },
      deep: true
    },
    showHeight(val) {
      //console.log("shoHeight"+this.showHeight);
      this.whichFoot();
    }
  },
  mounted() {
    this.type = this.$route.query.type;
    //console.log("type",this.type);
    var normalHeight = sessionStorage.getItem("normalHeight");

    var bg = document.getElementById("background");
    // normalHeight=document.documentElement.clientHeight;
    // console.log("height:" + normalHeight);
    bg.style.height = normalHeight + "px";
    bg.style.backgroundColor = "#FFFFFF";
    bg.style.margin = "0px";

    // window.onresize监听页面高度的变化
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.documentElement.clientHeight;
        that.showHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    goToXieYi() {
      this.$router.push({
        path: "/mine/fuWuXieYi"
      });
    },
    //step1
    back() {
      console.log("back:");
      this.$router.go(-1);
    },
    backToLogin() {
      this.$router.push({
        path: "/"
      });
    },
    step1Validate() {
      if (this.loginForm.phone === "") {
        Toast("请输入手机号");
        return 0;
      } else if (this.loginForm.checkCode === "") {
        Toast("请输入验证码");
        return 0;
      } else if (this.disYanZhen) {
        Toast("请输入合法的手机号");
        return 0;
      } else {
        return 1;
      }
    },
    step2Validate() {
      if (this.loginForm.password === "") {
        Toast("请设置密码");
        return 0;
      } else if (this.loginForm.password.length <= 6) {
        Toast("密码必须大于6位");
        return 0;
      } else {
        return 1;
      }
    },
    goToStep2() {
      if (this.step1Validate()) {
        this.step = 2;
      }
    },
    
    //获取验证码
    getYanZhen() {
      var URL = this.IP.IP + "/user/SMSCode";
      console.log(URL);
      this.showTime = true;
      this.count = 60;
      let clock = window.setInterval(() => {
        this.count--;
        if (this.count < 0) {
          //当倒计时小于0时清除定时器
          window.clearInterval(clock);
          this.showTime = false;
          this.count = 60;
        }
      }, 1000);
      var type="REGISTER"
      if(this.type=='forget'){
        type="RESETPASSWORD"
      }
      this.$ajax({
        method: "post",
        url: URL,
        params: {
          phone: this.loginForm.phone,
          smsCodeType: type
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            Toast(response.data.data);
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //比较实时高度，判断底部样式
    whichFoot() {
      if (this.showHeight < this.height) {
        //console.log("foot not fixed");
        this.whichPosition = false;
      } else {
        //console.log("foot fixed");
        this.whichPosition = true;
      }
    },

    //step2
    goToStep1() {
      this.step = 1;
      var yanzhen = document.getElementById("checkCodeBtn");
      var pattern = /^1[34578]\d{9}$/;
      if (
        this.loginForm.phone.length == 11 &&
        pattern.test(this.loginForm.phone)
      ) {
        if (yanzhen) {
          yanzhen.style.color = "#53cdf5";
          this.disYanZhen = false;
          console.log(this.loginForm.phone);
        }
      } else {
        if (yanzhen) {
          yanzhen.style.color = "#cccccc";
          //Toast("请输入正确的手机号！");
          this.disYanZhen = true;
        }
      }
    },
    //注册
    regist() {
      var URL = this.IP.IP + "/user/registerByPhone";
      console.log(URL);
      console.log(this.loginForm.phone);
      console.log(this.loginForm.checkCode);
      console.log(this.loginForm.code);
      this.$ajax({
        method: "post",
        url: URL,
        data: this.loginForm
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            Toast(response.data.data);
            this.$router.push({
              path: "/login"
            });
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //重置密码
    resetPassword() {
      var URL = this.IP.IP + "/user/resetPassword";
      console.log(URL);
      console.log(this.loginForm);
      this.$ajax({
        method: "post",
        url: URL,
        data: this.loginForm
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            Toast(response.data.data);
            this.$router.push({
              path: "/login"
            });
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //提交
    submit() {
      if (this.step2Validate()) {
        if (this.type == "regist") {
          this.regist();
        } else if (this.type == "forget") {
          this.resetPassword();
        }
      }
    }
  }
};
</script>
<style>
.registFootPosition {
  position: fixed;
  bottom: 20px;
  width: 100%;
}
.el-header,
el-main,
el-footer,
el-aside {
  padding: 0px;
  margin: 0px;
}
.stepBottom {
  margin-bottom: 50px;
}
.registInput .el-input__inner {
  font-size: 1.125em;
  border: none;
  border-bottom: 1px solid;
  border-color: #f0f0f0;
  background-color: rgba(255, 255, 255, 0);
  color: #707070;
  border-radius: 0px;
}
.imgCol {
  display: flex;
  align-items: center;
  justify-content: center;
}
/**
.line{
    height: 1px;
    border-top: solid  #F0F0F0 1px;
}*/
.btnYanZhen {
  height: 100%;
  font-size: 0.8em;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  /** color: #53cdf5;*/
  border-style: none;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #53cdf5;
  border-color: #53cdf5;
}
.el-checkbox__inner {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.words {
  color: #b8b8b8;
}
.btn {
  line-height: 0.75em;
  width: 100%;
  background-color: #53cdf5;
  border-style: none;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.btnNotRegist {
  line-height: 0.75em;
  width: 100%;
  background-color: #b8b8b8;
  border-style: none;
  outline: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}
.btnWords {
  font-size: 1.125em;
  color: #ffffff;
}
#thirdPositionRegist {
  /**
    position: fixed;*/
  bottom: 10px;
}

#inputHeight {
  height: 200px;
}
@media screen and (max-height: 600px) {
  #inputHeight {
    height: 160px;
  }
}
</style>
